import React from 'react';
import './index.scss';
import { PrizeWheel, Button } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';

export interface prizeWheelRefProps {
  reset: () => void;
  setPrize: (awardIndex: number) => void;
}

// import Dialog from '../../components/Dialog/dialog';

class PrizeWheelPage extends React.Component<any, any> {
  prizeWheelRef: React.RefObject<prizeWheelRefProps>;

  constructor(props: any) {
    super(props);

    this.state = {
      data: [
        {
          title: '1元',
          img: (
            <img
              src={require('../../../assets/images/present_01.png')}
              alt=""
            />
          ),
          bgColor: '#FDEEBD',
          txtColor: '#fa4445',
        },
        {
          title: '1元',
          img: (
            <img
              src={require('../../../assets/images/present_01.png')}
              alt=""
            />
          ),
          bgColor: '#FFC200',
          txtColor: '#fa4445',
        },
        {
          title: '2元',
          img: (
            <img
              src={require('../../../assets/images/present_02.png')}
              alt=""
            />
          ),
          bgColor: '#FDEEBD',
          txtColor: '#fa4445',
        },
        {
          title: '5元',
          // img: <img src="../../../assets/images/present_05.png" alt=""/>,
          img: (
            <img
              src={require('../../../assets/images/present_05.png')}
              alt=""
            />
          ),
          bgColor: '#FFC200',
          txtColor: '#fa4445',
        },
        {
          title: '10元',
          img: (
            <img
              src={require('../../../assets/images/present_10.png')}
              alt=""
            />
          ),
          bgColor: '#FDEEBD',
          txtColor: '#fa4445',
        },
        {
          title: '1000元',
          img: (
            <img
              src={require('../../../assets/images/present_1000.png')}
              alt=""
            />
          ),
          bgColor: '#FFC200',
          txtColor: '#fa4445',
        },
      ],
      dialogVisible: false,
      award: {
        awardIndex: '',
        title: '',
        imgSrc: '',
      },
    };

    this.prizeWheelRef = React.createRef();
  }

  lottery = () => {
    let awardIndex = Math.floor(Math.random() * 5);
    console.log(awardIndex);
    setTimeout(() => {
      this.prizeWheelRef.current?.setPrize(awardIndex);
    }, 1000);
  };

  getMsg = (e: MessageEvent) => {
    const { index } = e.data;
    this.setState({ active: index });
  };

  handleCloseDialog = () => {
    this.setState({ dialogVisible: false });
  };

  getResetStyle = () => `
        .aad-body {
            padding: .1rem;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

    `;

  render() {
    return (
      <div>
        <style dangerouslySetInnerHTML={{ __html: this.getResetStyle() }} />
        <div className="phone_prizeWheel">
          <DemoBlock title="转盘抽奖">
            <PrizeWheel
              ref={this.prizeWheelRef}
              onClick={this.lottery}
              arrowStyle={{ top: '48%' }}
              arrowImg={
                <img
                  src={require('../../../assets/images/lottery_arrow.png')}
                  alt=""
                />
              }
              data={this.state.data}
              successFun={v => {
                console.log(v);
                this.setState({
                  award: v,
                  dialogVisible: true,
                });
              }}
            />
          </DemoBlock>
          {/* <Dialog
                            visible={this.state.dialogVisible}
                            title="中奖提示"
                            onClose={this.handleCloseDialog}
                        >
                            <img style={{width: '50%'}} src={this.state.award.imgSrc}/>
                            <Button onClick={this.handleCloseDialog} style={{width: '100%', marginTop: '.3rem'}} type="primary">关闭</Button>
                        </Dialog> */}
        </div>
      </div>
    );
  }
}

export default PrizeWheelPage;
